<template>
  <div id="app">
    <transition name="van-fade">
      <div class="index" v-show="$route.path === '/'">
        <!-- 搜索 -->
        <van-search
          v-model="value"
          shape="round"
          placeholder="请输入搜索关键词"
          disabled
          @click="$router.push('/home/popup')"
        />
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989FA">
          <van-swipe-item v-for="v in banner" :key="v.id">
            <img :src="v.image_url" alt="" width="100%" />
          </van-swipe-item>
        </van-swipe>
        <!-- 五宫格 -->
        <van-grid :column-num="5">
          <van-grid-item
            :icon="v.icon_url"
            :text="v.name"
            v-for="v in channel"
            :key="v.id"
            @click="$router.push('/channel?id='+v.id)"
          />
        </van-grid>
        <!-- 品牌制造商直供 -->
        <div id="maker" class="maker">
          <div class="m_title">品牌制造商直供</div>
          <div>
            <ul class="m_ul">
              <li
                v-for="v in brandList"
                :key="v.id"
                @click="$router.push('/brand/'+v.id)"
              >
                <img :src="v.pic_url" alt="" width="100%" />
                <div class="m_word">
                  <h2 class="m_name">{{ v.name }}</h2>
                  <h3 class="m_floor_price">￥ {{ v.floor_price }}.00元</h3>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 周一周四·新品首发 -->
        <div class="new">
          <div class="new_title">周一周四·新品首发</div>
          <div>
            <ul class="new_ul">
              <li v-for="v in newGoodsList" :key="v.id" @click="$router.push('/details/'+v.id)">
                <img :src="v.list_pic_url" alt="" width="100%" />
                <div class="new_word">
                  <h2 class="new_name">{{ v.name }}</h2>
                  <h3 class="new_retail_price">￥ {{ v.retail_price }}.00元</h3>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 人气推荐 -->
        <div class="recommend">
          <div class="r_title">人气推荐</div>
          <div>
            <ul class="r_ul">
              <li v-for="v in hotGoodsList" :key="v.id">
                <div class="r_left">
                  <img :src="v.list_pic_url" alt="" height="100%" />
                </div>
                <div class="r_right">
                  <h2 class="r_name">{{ v.name }}</h2>
                  <h3 class="r_goods_brief">{{ v.goods_brief }}</h3>
                  <h4 class="r_retail_price">￥ {{ v.retail_price }}.00</h4>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 专题精选 -->
        <div class="choice">
          <div class="choice_title">专题精选</div>
          <div>
            <van-swipe :loop="false" :width="300" :show-indicators="false">
              <van-swipe-item v-for="v in topicList" :key="v.id">
                <img
                  :src="v.scene_pic_url"
                  alt=""
                  class="choice_img"
                  width="100%"
                />
                <span class="choice_title">{{ v.title }}</span>
                <span class="choice_price_info">￥ {{ v.price_info }}元起</span>
                <h2 class="choice_subtitle van-ellipsis">{{ v.subtitle }}</h2>
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
        <!-- 分类 -->
        <div class="sort" v-for="v in categoryList" :key="v.id">
          <div class="s_name">{{ v.name }}</div>
          <ul class="s_ul">
            <li v-for="v in v.goodsList" :key="v.id">
              <img :src="v.list_pic_url" alt="" width="100%" />
              <div class="new_word">
                <h2 class="new_name van-ellipsis">{{ v.name }}</h2>
                <h3 class="new_retail_price">￥ {{ v.retail_price }}.00元</h3>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </transition>
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { Toast } from "vant";
import { GetHomeList } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      banner: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: [],
    };
  },

  components: {},

  created() {
    GetHomeList()
      .then((res) => {
        // console.log(res);
        if (res.errno == 0) {
          //轮播图
          this.banner = res.data.banner;
          //五宫格
          this.channel = res.data.channel;
          // console.log(this.channel);
          //制造商直供
          this.brandList = res.data.brandList;
          // console.log(this.brandList);
          //新品首发
          this.newGoodsList = res.data.newGoodsList;
          //人气推荐
          this.hotGoodsList = res.data.hotGoodsList;
          //专题精选
          this.topicList = res.data.topicList;
          //分类
          this.categoryList = res.data.categoryList;
        }
      })
      .catch((err) => {
        // console.log(err);
      });
  },
  beforeCreate() {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 1000,
    });
  },
  methods: {},
};
</script>
<style lang='less'>
.m_title,
.new_title,
.r_title,
.choice_title {
  // width: 100%;
  height: 0.5rem;
  background-color: #fff;
  text-align: center;
  line-height: 0.5rem;
  margin-top: 0.2rem;
  font-size: 0.2rem;
}
.r_title {
  margin-top: 0.1rem;
}
.m_ul li,
.new_ul li {
  width: 49%;
  position: relative;
}
.m_ul,
.new_ul,
.s_ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #fff;
}
.m_word {
  position: absolute;
  left: 0.1rem;
  top: 0.1rem;
  font-size: 0.13rem;
}
.m_floor_price,
.new_retail_price {
  margin-top: 0.15rem;
  color: #8b0000;
}
.new_word {
  text-align: center;
  font-size: 0.13rem;
}
.new_ul {
  padding-bottom: 0.2rem;
}
.r_ul {
  background-color: #fff;
}
.r_ul li {
  height: 0.88rem;
  display: flex;
  background-color: #fafafa;
  padding: 0.08rem 0.16rem;
}
.r_ul li:nth-of-type(2) {
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.r_name {
  font-size: 0.18rem;
  line-height: 0.29rem;
}
.r_goods_brief {
  font-size: 0.12rem;
  line-height: 0.4rem;
}
.r_retail_price {
  font-size: 0.12rem;
  line-height: 0.2rem;
  color: #8b0000;
}
.choice {
  background-color: #fff;
}
.choice_img {
  height: 2rem;
}
.choice_title {
  font-size: 0.16rem;
}
.choice_price_info {
  font-size: 0.16rem;
  color: #8b0000;
}
.choice_subtitle {
  font-size: 0.14rem;
}
.choice .van-swipe-item:nth-of-type(2) {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.s_name {
  width: 100%;
  height: 0.5rem;
  background-color: #fff;
  text-align: center;
  line-height: 0.5rem;
  font-size: 0.2rem;
}
.s_ul li {
  width: 49%;
}
</style>